<template>
  <div class="tab-content">
    <el-alert title="消息提示的文案" type="info" show-icon>
      <template #title>
        <span>数据一共{{pager.total}}条</span>
      </template>
    </el-alert>
    <el-table :data="tableData" style="width: 100%" size="medium" fit>
      <el-table-column width="120px" prop="number" label="试题编号"></el-table-column>
      <el-table-column width="120px" prop="subjectID" label="学科" :formatter="filterSubject"></el-table-column>
      <el-table-column width="120px" prop="catalog" label="目录"> </el-table-column>
      <el-table-column width="120px" prop="questionType" label="题型" :formatter="filterQuestionType"> </el-table-column>
      <el-table-column prop="question" width="340px" label="题干">
        <template v-slot="scope">
          <div v-html="scope.row.question"></div>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" width="240px" label="录入时间">
        <template v-slot="scope">
          <span>{{scope.row.addDate|filterDate}}</span>
        </template>
      </el-table-column>
      <el-table-column width="160px" prop="difficulty" label="难度" :formatter="filterDifficulty"> </el-table-column>
      <el-table-column width="160px" prop="creator" label="录入人"> </el-table-column>
      <el-table-column width="160px" prop="chkState" label="审核状态"> </el-table-column>
      <el-table-column width="160px" prop="chkRemarks" label="审核意见"> </el-table-column>
      <el-table-column width="160px" prop="chkUser" label="审核人"> </el-table-column>
      <el-table-column width="160px" prop="publishState" label="发布状态" :formatter="filterPublsih"> </el-table-column>
      <el-table-column label="操作" fixed="right" width="240px">
        <el-row type="flex" justify="space-around" align="middle" slot-scope="{row}" class="tableAction">
          <el-button size="small" @click="preview(row)">预览</el-button>
          <el-button size="small" :class="{disable: parseInt(row.chkState)+1===2}" :disabled="parseInt(row.chkState)+1===2" @click="checkQue(row)">审核</el-button>
          <el-button size="small" :class="{disable: parseInt(row.publishState)+1===2}" :disabled="parseInt(row.publishState)+1===2" @click="$router.push({path: '/questions/new'})">修改</el-button>
          <el-button size="small" v-if="parseInt(row.publishState)===1" @click="changePublish(parseInt(row.publishState),row.id)">下架</el-button>
          <el-button size="small" v-else @click="changePublish(parseInt(row.publishState),row.id)">上架</el-button>
          <el-button size="small" :class="{disable: parseInt(row.publishState)===1}" :disabled="parseInt(row.publishState)===1" @click="delQuestion(row.id)">删除</el-button>
        </el-row>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row type="flex" justify="end">
      <el-pagination layout="prev,pager,next,sizes,jumper"
       :total="pager.total"
       :current-page="pager.page"
       :page-size="pager.pagesize"
       :page-sizes="pageSizes"
       @current-change="currentChange"
       @size-change="sizeChange"
      ></el-pagination>
    </el-row>
    <!-- 审核弹层 -->
    <el-dialog
      class="checkDialog"
      title="提示"
      :visible.sync="checkDialog"
      width="30%"
      center>
      <el-row style="margin: 10px 0">
        <el-radio v-model="chk.chkState" :label="1">通过</el-radio>
        <el-radio v-model="chk.chkState" :label="2">拒绝</el-radio>
      </el-row>
      <el-input
       style="margin-top: 10px"
        type="textarea"
        placeholder="请输入内容"
        v-model="chk.chkRemarks"
        maxlength="30"
        show-word-limit
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkDialog = false">取 消</el-button>
        <el-button type="primary" @click="subCheck">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 预览弹层 -->
    <el-dialog
      title="题目预览"
      v-if="prevDialog"
      :visible.sync="prevDialog"
      width="60%"
      style="height: 80vh"
      @close="prevClose">
      <el-descriptions :column="4">
          <el-descriptions-item label="【题型】">{{filterQuestionType(null,null,nowQuestion?.questionType,null)}}</el-descriptions-item>
          <el-descriptions-item label="【编号】">{{nowQuestion.id}}</el-descriptions-item>
          <el-descriptions-item label="【难度】">{{filterDifficulty(null,null,nowQuestion.difficulty,null)}}</el-descriptions-item>
          <el-descriptions-item label="【标签】">{{nowQuestion.tags}}</el-descriptions-item>
          <el-descriptions-item label="【学科】">{{nowQuestion.subject}}</el-descriptions-item>
          <el-descriptions-item label="【目录】">{{nowQuestion.catalog}}</el-descriptions-item>
          <el-descriptions-item label="【方向】">{{nowQuestion.direction}}</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-descriptions title="【题干】：" :column="1" :colon="false">
          <el-descriptions-item > <div v-html="nowQuestion.question" style="color: #0101ff"></div></el-descriptions-item>
          <template v-if="questionDetail.questionType === '1'">
            <el-descriptions-item v-for="item in questionDetail.options" :key="item.id">
              <div>
                <el-radio v-model="answer" :label="item.code">{{item.title}}</el-radio>
              </div>
            </el-descriptions-item>
          </template>
          <template v-else-if="questionDetail.questionType === '2'">
            <el-descriptions-item>
              <el-checkbox-group v-model="answer">
                  <div>
                    <div v-for="item in questionDetail.options" :key="item.id"><el-checkbox  :label="item.code">{{item.title}}</el-checkbox></div>
                  </div>
                </el-checkbox-group>
            </el-descriptions-item>
          </template>
      </el-descriptions>
      <el-divider></el-divider>
      <div>
        【参考答案】: <el-button type="danger" size="large" @click="playAnswer=true">视频答案预览</el-button>
        <div v-if="playAnswer">
          <video :src="questionDetail.videoURL" autoplay muted></video>
        </div>
      </div>
      <el-divider></el-divider>
      <div style="display: flex;align-items: center;">【答案解析】: <span v-html="questionDetail.answer"></span></div>
      <el-divider></el-divider>
      <div>【题目备注】:{{questionDetail.remarks}}</div>
      <el-divider></el-divider>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="prevClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { choicePublish, choiceAdd, choiceCheck, detail } from '@/api/hmmm/questions'
import { mapState } from 'vuex'
import { difficulty, questionType, publishType } from '@/api/hmmm/constants'
import dayjs from 'dayjs'
export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    pager: {
      type: Object,
      default: () => ({
        page: 1,
        pagesize: 5,
        total: 100
      })
    }
  },
  computed: {
    ...mapState('choice', ['subjectList', 'directoryList'])
  },
  data () {
    return {
      pageSizes: [5, 10, 20, 50],
      checkDialog: false,
      prevDialog: false,
      nowQuestion: null,
      questionDetail: null,
      answer: null,
      playAnswer: false,
      chk: {
        id: '',
        chkState: '',
        chkRemarks: ''
      }
    }
  },
  filters: {
    filterDate (date) {
      return dayjs(date).format('YYYY-MM-DD hh:mm:ss')
    }
  },
  methods: {
    currentChange (page) {
      this.$emit('pagerChange', {
        ...this.pager,
        page
      })
    },
    sizeChange (pagesize) {
      this.$emit('pagerChange', {
        ...this.pager,
        pagesize
      })
    },
    filterDifficulty (row, column, cellValue, index) {
      return difficulty.find(item => item.value === parseInt(cellValue))?.label
    },
    filterQuestionType (row, column, cellValue, index) {
      return questionType.find(item => item.value === parseInt(cellValue))?.label
    },
    filterSubject (row, column, cellValue, index) {
      return this.subjectList.find(item => item.value === parseInt(cellValue))?.label
    },
    filterPublsih (row, column, cellValue, index) {
      return publishType.find(item => item.value === parseInt(cellValue) + 1)?.label
    },
    changePublish (state, id) {
      this.$confirm(state === 1 ? '您确认下架这道题目吗?' : '您确认上架这道题目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await choicePublish({ id, publishState: state === 0 ? 1 : 0 })
        this.$message({
          type: 'success',
          message: state === 0 ? '下架成功!' : '上架成功'
        })
        this.$emit('pagerChange')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    delQuestion (id) {
      this.$confirm('此操作将永久删除该题目，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await choiceAdd({ id, choiceState: 0 })
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.$emit('pagerChange')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    checkQue (row) {
      this.chk.chkState = row.chkState
      this.checkDialog = true
    },
    async subCheck () {
      try {
        await choiceCheck(this.chk)
        this.$message({
          type: 'success',
          message: '审核成功'
        })
        this.checkDialog = false
        this.$emit('pagerChange')
      } catch (err) {
        console.log(err)
      }
    },
    async preview (row) {
      const res = await detail(row)
      this.questionDetail = res.data
      this.answer = this.questionDetail.options.filter(item => item.isRight).map(item => item.code)
      this.answer = this.questionDetail.questionType === '1' ? this.answer[0] : this.answer
      console.log(this.questionDetail.videoURL)
      this.nowQuestion = row
      this.prevDialog = true
    },
    prevClose () {
      this.prevDialog = false
      this.playAnswer = false
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-content {
  .tableAction{
    ::v-deep .el-button{
    width: 40px;
    border: unset;
    color: #409eff;
    background: 0 0;
    padding-left: 0;
    padding-right: 0;
    &.disable {
      color: #c0c4cc;
      cursor: not-allowed;
    }
  }
  }
  .checkDialog {
    padding: 10px;
  }
}
</style>
